<script setup>
import { ref, reactive } from "vue";
const count = ref(0);
const counter = reactive({ count: 0, name: "York", age: ref(count.value) });
const a = reactive([1, 2, 3]);
const c = ref(0);
const object = { id: ref(1) };

function increment() {
  count.value++;
  counter.count++;
  counter.name = counter.name + counter.count;
  counter.age = count.value;
  a.push(4);
}
</script>
<template>
  <div @click="increment">
    {{ count }} Count: {{ counter.count }}; Name: {{ counter.name }} Age:
    {{ counter.age }}Array: {{ a }}
    <br />
    {{ c }}
    <br />
    {{ object.id.value }}
  </div>
</template>

<style scoped>
div {
  font-weight: bold;
}
</style>

<!-- <script>
import { ref } from "vue";
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  },
};
</script>

<template>
  <div @click="increment">{{ count }}</div>
</template> -->